<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Poi点 - API接口控制版</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
            font-family: 'Arial', sans-serif;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }

        /* iOS风格毛玻璃控制面板 */
        .control-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 320px;
            max-height: 80vh;
            background: rgba(198, 198, 198, 0.3);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 24px;
            color: white;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: 14px;
            z-index: 999;
            overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        /* iOS风格标题 */
        .panel-title {
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 24px;
            color: white;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        /* iOS Poi选择器 - iOS胶囊样式 */
        .poi-selector {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            padding: 4px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 16px;
        }

        .poi-btn {
            flex: 1;
            padding: 12px 8px;
            border: none;
            border-radius: 12px;
            background: transparent;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            font-size: 14px;
        }

        .poi-btn.active {
            background: rgba(255, 255, 255, 0.9);
            color: #000;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        /* iOS风格折叠卡片 */
        .collapse-card {
            margin-bottom: 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .collapse-header {
            padding: 16px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.05);
            transition: all 0.2s ease;
            user-select: none;
        }

        .collapse-header:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .collapse-title {
            font-weight: 600;
            color: white;
            font-size: 16px;
        }

        .collapse-icon {
            font-size: 18px;
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            color: rgba(255, 255, 255, 0.7);
        }

        .collapse-card.expanded .collapse-icon {
            transform: rotate(180deg);
        }

        .collapse-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .collapse-card.expanded .collapse-content {
            max-height: 400px;
            /* 设置最大高度，超出部分滚动 */
            overflow-y: auto;
            /* 启用垂直滚动 */
            scroll-behavior: smooth;
            /* 平滑滚动效果 */
        }

        /* 自定义滚动条样式 - iOS风格 */
        .collapse-content::-webkit-scrollbar {
            width: 6px;
        }

        .collapse-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .collapse-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            transition: background 0.3s ease;
        }

        .collapse-content::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        /* Firefox滚动条样式 */
        .collapse-content {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
        }

        .collapse-body {
            padding: 20px;
            /* 为滚动内容添加底部间距，避免内容贴底 */
            padding-bottom: 24px;
        }

        /* iOS风格控制组 */
        .control-group {
            margin-bottom: 20px;
        }

        .control-label {
            display: block;
            margin-bottom: 8px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 14px;
        }

        .control-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 14px;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        .control-input:focus {
            outline: none;
            border-color: rgba(0, 122, 255, 0.6);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        .control-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        /* 专门为颜色选择器设计的样式 - 让颜色显示正确！ */
        .color-input {
            width: 100%;
            height: 44px;
            padding: 4px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        .color-input:focus {
            outline: none;
            border-color: rgba(0, 122, 255, 0.6);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        .color-input::-webkit-color-swatch-wrapper {
            padding: 0;
            border-radius: 8px;
            overflow: hidden;
        }

        .color-input::-webkit-color-swatch {
            border: none;
            border-radius: 8px;
        }

        /* Firefox颜色选择器样式 */
        .color-input::-moz-color-swatch {
            border: none;
            border-radius: 8px;
        }

        /* 确保颜色选择器在hover状态下有视觉反馈 */
        .color-input:hover {
            border-color: rgba(255, 255, 255, 0.4);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* 为不同浏览器提供兼容性支持 */
        .color-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        /* 重要：确保颜色输入框的原生颜色显示不被覆盖 */
        input[type="color"].color-input {
            background: transparent !important;
            color: transparent !important;
        }

        /* Edge浏览器颜色选择器样式 */
        .color-input::-ms-color-swatch-wrapper {
            padding: 0;
            border-radius: 8px;
        }

        /* iOS风格下拉框选项 */
        .control-input option {
            background: rgba(40, 40, 40, 0.95);
            color: white;
            padding: 8px;
        }

        /* iOS风格滑块 */
        .slider-container {
            position: relative;
            margin: 16px 0;
        }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.2);
            outline: none;
            transition: all 0.2s ease;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* Firefox滑块样式 */
        .slider::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .slider::-moz-range-track {
            height: 6px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
        }

        .slider-value {
            position: absolute;
            right: 0;
            top: -30px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
        }

        /* 📱 iOS风格复选框 */
        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 12px 0;
        }

        .ios-checkbox {
            position: relative;
            width: 24px;
            height: 24px;
        }

        .ios-checkbox input {
            opacity: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
        }

        .ios-checkbox-design {
            position: absolute;
            top: 0;
            left: 0;
            width: 24px;
            height: 24px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            background: transparent;
            transition: all 0.2s ease;
            pointer-events: none;
        }

        .ios-checkbox input:checked+.ios-checkbox-design {
            background: #007AFF;
            border-color: #007AFF;
        }

        .ios-checkbox-design::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            color: white;
            font-size: 14px;
            font-weight: bold;
            transition: transform 0.2s ease;
        }

        .ios-checkbox input:checked+.ios-checkbox-design::after {
            transform: translate(-50%, -50%) scale(1);
        }

        /* iOS风格按钮 */
        .ios-button {
            width: 100%;
            padding: 14px 20px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #007AFF, #0056CC);
            color: white;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 16px;
            box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
        }

        .ios-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4);
        }

        .ios-button:active {
            transform: translateY(0);
        }

        /* 快速操作按钮组 */
        .quick-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .quick-btn {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-weight: 500;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .quick-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* 纹理上传区域样式 */
        .texture-upload-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .texture-preview {
            width: 100%;
            height: 120px;
            border: 2px dashed rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .texture-preview:hover {
            border-color: rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.1);
        }

        .texture-preview.has-image {
            border-style: solid;
            border-color: rgba(0, 122, 255, 0.6);
        }

        .texture-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        .texture-placeholder {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            text-align: center;
            user-select: none;
        }

        .texture-controls {
            display: flex;
            gap: 8px;
        }

        .texture-btn {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .texture-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* 添加说明文字样式 */
        .instructions {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 999;
            max-width: 300px;
        }
    </style>
</head>

<body>
    <!-- 控制面板 -->
    <div class="control-panel">
        <div class="panel-title">POI 控制面板</div>

        <!-- POI选择器 -->
        <div class="poi-selector">
            <button class="poi-btn active" data-poi="poi1">POI-1</button>
            <button class="poi-btn" data-poi="poi2">POI-2</button>
            <button class="poi-btn" data-poi="poi3">POI-3</button>
        </div>

        <!-- 接口1: 文本内容与样式控制 -->
        <div class="collapse-card expanded">
            <div class="collapse-header" onclick="toggleCollapse(this)">
                <span class="collapse-title">文本内容与样式</span>
                <span class="collapse-icon">▼</span>
            </div>
            <div class="collapse-content">
                <div class="collapse-body">
                    <div class="control-group">
                        <label class="control-label">文字内容</label>
                        <input type="text" id="textContent" class="control-input" placeholder="输入POI名称..."
                            value="接口控制-1">
                    </div>
                    <div class="control-group">
                        <label class="control-label">字体大小</label>
                        <div class="slider-container">
                            <input type="range" id="fontSize" class="slider" min="10" max="1000" value="1000">
                            <div class="slider-value" id="fontSizeValue">1000px</div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">字体颜色</label>
                        <input type="color" id="textColor" class="color-input" value="#dc143c">
                    </div>
                    <div class="control-group">
                        <label class="control-label">描边颜色</label>
                        <input type="color" id="strokeColor" class="color-input" value="#000000">
                    </div>
                    <div class="control-group">
                        <label class="control-label">描边宽度</label>
                        <div class="slider-container">
                            <input type="range" id="strokeWidth" class="slider" min="0" max="20" value="5">
                            <div class="slider-value" id="strokeWidthValue">5px</div>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="checkbox-container">
                            <div class="ios-checkbox">
                                <input type="checkbox" id="isBold" checked>
                                <div class="ios-checkbox-design"></div>
                            </div>
                            <label class="control-label" for="isBold">粗体</label>
                        </div>
                        <div class="checkbox-container">
                            <div class="ios-checkbox">
                                <input type="checkbox" id="isItalic">
                                <div class="ios-checkbox-design"></div>
                            </div>
                            <label class="control-label" for="isItalic">斜体</label>
                        </div>
                    </div>
                    <button class="ios-button" onclick="applyTextStyle()">应用文字样式</button>
                </div>
            </div>
        </div>

        <!-- 接口2: 文本布局与位置控制 -->
        <div class="collapse-card">
            <div class="collapse-header" onclick="toggleCollapse(this)">
                <span class="collapse-title">文本布局与位置</span>
                <span class="collapse-icon">▼</span>
            </div>
            <div class="collapse-content">
                <div class="collapse-body">
                    <div class="control-group">
                        <label class="control-label">文字位置</label>
                        <select id="textPosition" class="control-input">
                            <option value="bottom">底部 (bottom)</option>
                            <option value="top">顶部 (top)</option>
                            <option value="left">左侧 (left)</option>
                            <option value="right">右侧 (right)</option>
                            <option value="center">中心 (center)</option>
                            <option value="image-only">仅图片</option>
                            <option value="text-only">仅文字</option>
                        </select>
                    </div>
                    <div class="control-group">
                        <label class="control-label">X轴偏移</label>
                        <div class="slider-container">
                            <input type="range" id="offsetX" class="slider" min="-200" max="200" value="0">
                            <div class="slider-value" id="offsetXValue">0px</div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Y轴偏移</label>
                        <div class="slider-container">
                            <input type="range" id="offsetY" class="slider" min="-200" max="200" value="0">
                            <div class="slider-value" id="offsetYValue">0px</div>
                        </div>
                    </div>
                    <button class="ios-button" onclick="applyLayoutAndPosition()">应用布局与位置</button>
                </div>
            </div>
        </div>

        <!-- 接口3: 背景控制 -->
        <div class="collapse-card">
            <div class="collapse-header" onclick="toggleCollapse(this)">
                <span class="collapse-title">背景控制</span>
                <span class="collapse-icon">▼</span>
            </div>
            <div class="collapse-content">
                <div class="collapse-body">
                    <div class="control-group">
                        <div class="checkbox-container">
                            <div class="ios-checkbox">
                                <input type="checkbox" id="enableBackground">
                                <div class="ios-checkbox-design"></div>
                            </div>
                            <label class="control-label" for="enableBackground">启用背景</label>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">背景颜色</label>
                        <input type="color" id="backgroundColor" class="color-input" value="#ffffff">
                    </div>
                    <div class="control-group">
                        <label class="control-label">背景透明度</label>
                        <div class="slider-container">
                            <input type="range" id="backgroundOpacity" class="slider" min="0" max="1" step="0.1"
                                value="0.8">
                            <div class="slider-value" id="backgroundOpacityValue">0.8</div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">背景形状</label>
                        <select id="backgroundShape" class="control-input">
                            <option value="rectangle">矩形</option>
                            <option value="circle">圆形</option>
                        </select>
                    </div>
                    <div class="control-group">
                        <label class="control-label">背景大小</label>
                        <div class="slider-container">
                            <input type="range" id="backgroundSize" class="slider" min="0.5" max="3.0" step="0.1"
                                value="1.0">
                            <div class="slider-value" id="backgroundSizeValue">1.0x</div>
                        </div>
                    </div>
                    <button class="ios-button" onclick="applyTextBackground()">应用背景</button>
                </div>
            </div>
        </div>

        <!-- 接口4: 图形控制 -->
        <div class="collapse-card expanded">
            <div class="collapse-header" onclick="toggleCollapse(this)">
                <span class="collapse-title">图形控制</span>
                <span class="collapse-icon">▼</span>
            </div>
            <div class="collapse-content">
                <div class="collapse-body">
                    <div class="control-group">
                        <label class="control-label">默认形状</label>
                        <select id="defaultShape" class="control-input">
                            <option value="circle">圆形</option>
                            <option value="rectangle">矩形</option>
                            <option value="square">正方形</option>
                            <option value="triangle">三角形</option>
                        </select>
                    </div>

                    <!-- 新增：纹理图片上传区域 -->
                    <div class="control-group">
                        <label class="control-label">纹理图片</label>
                        <div class="texture-upload-container">
                            <input type="file" id="textureUpload" accept="image/*" class="texture-input"
                                style="display: none;">
                            <div class="texture-preview" id="texturePreview"
                                onclick="document.getElementById('textureUpload').click()">
                                <span class="texture-placeholder">点击上传纹理图片</span>
                            </div>
                            <div class="texture-controls">
                                <button type="button" class="texture-btn" onclick="clearTexture()">清除</button>
                                <button type="button" class="texture-btn"
                                    onclick="document.getElementById('textureUpload').click()">选择图片</button>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">形状大小</label>
                        <div class="slider-container">
                            <input type="range" id="shapeSize" class="slider" min="0.5" max="3.0" step="0.1"
                                value="1.0">
                            <div class="slider-value" id="shapeSizeValue">1.0x</div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">形状填充颜色</label>
                        <input type="color" id="shapeColor" class="color-input" value="#dc143c">
                    </div>
                    <div class="control-group">
                        <label class="control-label">形状描边颜色</label>
                        <input type="color" id="shapeStrokeColor" class="color-input" value="#000000">
                    </div>
                    <div class="control-group">
                        <label class="control-label">形状描边宽度</label>
                        <div class="slider-container">
                            <input type="range" id="shapeStrokeWidth" class="slider" min="0" max="10" value="2">
                            <div class="slider-value" id="shapeStrokeWidthValue">2px</div>
                        </div>
                    </div>
                    <button class="ios-button" onclick="applyGraphicStyle()">应用图形样式</button>
                </div>
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="quick-actions">
            <button class="quick-btn" onclick="resetPOI()">重置</button>
            <button class="quick-btn" onclick="copyToOtherPOIs()">复制</button>
        </div>
    </div>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [120.152925, 30.248748, 1500], //相机的位置  
        lookAt: [120.152925, 30.248748, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 21, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        maxSlopeAngle: 80, //地图最大倾斜角度
        baseLayer: [
            //影像底图
            {
                url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });
    // 使用新的接口控制系统创建POI - 挂载到全局对象供控制台访问
    window.poi1 = addPOI(new GE.Point(120.152925, 30.248748, 0), '接口控制-1', 'bottom', true);
    window.poi2 = addPOI(new GE.Point(120.156925, 30.248748, 0), '接口控制-2', 'top', true);
    window.poi3 = addPOI(new GE.Point(120.160925, 30.248748, 0), '接口控制-3', 'left', false);

    // 为了方便，也创建局部引用
    let poi1 = window.poi1;
    let poi2 = window.poi2;
    let poi3 = window.poi3;

    // 在控制台打印使用提示
    console.log(' POI API接口控制系统已准备就绪！');
    console.log('全局变量: window.poi1, window.poi2, window.poi3 (或直接使用 poi1, poi2, poi3)');
    console.log('现在可以使用右侧图形化界面控制POI，或继续使用控制台命令！');
    console.log('新功能：支持纹理图片上传，为形状添加个性化纹理！');

    // 控制系统变量
    let currentSelectedPOI = 'poi1'; // 当前选中的POI
    let currentTextureImage = null; // 当前纹理图片

    // 初始化控制系统
    initializeGUIControls();

    function addPOI(point, name, textPosition = 'bottom', hasBackground = false) {
        let poi = new GE.Poi2({
            url: ' http://localhost:9000/examples/resources/images/warn.png',
            position: point,
            name: name,
            strokeStyle: '#000000',
            strokeWidth: 5,
            size: 1000,
            isBold: true,
            baseImageSize: 1200,
            showText: true,
            textStyle: '#DC143C',
            textfont: 'sans-serif',
            center: [0.5, 0.0],
            backGroundStyle: hasBackground ? 'rgba(255, 255, 255, 0.8)' : '',
            textOffsetX: 0,
            textOffsetY: 0,
            textPosition: textPosition,
        })
        app.add(poi);

        poi.setClick = function (e) {
            console.log(e.object.config.name);
        }

        return poi; // 返回POI对象用于接口控制
    }

    // =========================
    // 图形化控制系统核心函数
    // =========================

    /**
     * 初始化控制系统 - 这里是控制的大脑! 
     */
    function initializeGUIControls() {
        console.log('控制系统初始化中...');

        // 初始化POI选择器事件
        setupPOISelector();

        // 初始化滑块值显示
        setupSliderValueDisplays();

        // 初始化纹理上传功能
        setupTextureUpload();

        // 初始化界面参数
        updateGUIFromCurrentPOI();

        console.log('控制系统初始化完成！');
    }

    /**
     * 折叠卡片切换功能
     */
    function toggleCollapse(header) {
        const card = header.closest('.collapse-card');
        card.classList.toggle('expanded');
    }

    /**
     * 设置滑块值实时显示
     */
    function setupSliderValueDisplays() {
        // 字体大小滑块
        const fontSizeSlider = document.getElementById('fontSize');
        const fontSizeValue = document.getElementById('fontSizeValue');
        fontSizeSlider.addEventListener('input', function () {
            fontSizeValue.textContent = this.value + 'px';
        });

        // 描边宽度滑块
        const strokeWidthSlider = document.getElementById('strokeWidth');
        const strokeWidthValue = document.getElementById('strokeWidthValue');
        strokeWidthSlider.addEventListener('input', function () {
            strokeWidthValue.textContent = this.value + 'px';
        });

        // X轴偏移滑块
        const offsetXSlider = document.getElementById('offsetX');
        const offsetXValue = document.getElementById('offsetXValue');
        offsetXSlider.addEventListener('input', function () {
            offsetXValue.textContent = this.value + 'px';
        });

        // Y轴偏移滑块
        const offsetYSlider = document.getElementById('offsetY');
        const offsetYValue = document.getElementById('offsetYValue');
        offsetYSlider.addEventListener('input', function () {
            offsetYValue.textContent = this.value + 'px';
        });

        // 背景透明度滑块
        const backgroundOpacitySlider = document.getElementById('backgroundOpacity');
        const backgroundOpacityValue = document.getElementById('backgroundOpacityValue');
        backgroundOpacitySlider.addEventListener('input', function () {
            backgroundOpacityValue.textContent = this.value;
        });

        // 形状大小滑块
        const shapeSizeSlider = document.getElementById('shapeSize');
        const shapeSizeValue = document.getElementById('shapeSizeValue');
        shapeSizeSlider.addEventListener('input', function () {
            shapeSizeValue.textContent = this.value + 'x';
        });

        // 背景大小滑块
        const backgroundSizeSlider = document.getElementById('backgroundSize');
        const backgroundSizeValue = document.getElementById('backgroundSizeValue');
        backgroundSizeSlider.addEventListener('input', function () {
            backgroundSizeValue.textContent = this.value + 'x';
        });

        // 形状描边宽度滑块
        const shapeStrokeWidthSlider = document.getElementById('shapeStrokeWidth');
        const shapeStrokeWidthValue = document.getElementById('shapeStrokeWidthValue');
        shapeStrokeWidthSlider.addEventListener('input', function () {
            shapeStrokeWidthValue.textContent = this.value + 'px';
        });
    }

    /**
     * 设置POI选择器事件
     */
    function setupPOISelector() {
        document.querySelectorAll('.poi-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                // 移除其他按钮的active类
                document.querySelectorAll('.poi-btn').forEach(b => b.classList.remove('active'));

                // 添加当前按钮的active类
                this.classList.add('active');

                // 更新当前选中的POI
                currentSelectedPOI = this.getAttribute('data-poi');

                // 更新界面参数
                updateGUIFromCurrentPOI();

                console.log(`🎯 当前选中POI: ${currentSelectedPOI}`);
            });
        });
    }

    /**
     * 设置纹理上传功能
     */
    function setupTextureUpload() {
        const textureUpload = document.getElementById('textureUpload');
        const texturePreview = document.getElementById('texturePreview');

        // 文件上传事件
        textureUpload.addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file && file.type.startsWith('image/')) {
                // 创建FileReader来读取图片
                const reader = new FileReader();
                reader.onload = function (e) {
                    // 创建图片对象
                    const img = new Image();
                    img.onload = function () {
                        // 保存纹理图片
                        currentTextureImage = img;

                        // 更新预览
                        updateTexturePreview(e.target.result);

                        console.log('🎨 纹理图片上传成功！');
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    }

    /**
     * 更新纹理预览
     */
    function updateTexturePreview(src) {
        const texturePreview = document.getElementById('texturePreview');
        texturePreview.innerHTML = `<img src="${src}" alt="纹理预览">`;
        texturePreview.classList.add('has-image');
    }

    /**
     * 清除纹理
     */
    function clearTexture() {
        const texturePreview = document.getElementById('texturePreview');
        const textureUpload = document.getElementById('textureUpload');

        // 清除当前纹理
        currentTextureImage = null;

        // 重置预览
        texturePreview.innerHTML = '<span class="texture-placeholder">📷 点击上传纹理图片</span>';
        texturePreview.classList.remove('has-image');

        // 清除文件输入
        textureUpload.value = '';

        console.log('纹理已清除！');
    }

    /**
        * 接口1: 应用文字样式
     */
    function applyTextStyle() {
        const poi = getCurrentPOI();
        if (!poi) return;

        const config = {
            name: document.getElementById('textContent').value,
            size: parseInt(document.getElementById('fontSize').value),
            textStyle: document.getElementById('textColor').value,
            strokeStyle: document.getElementById('strokeColor').value,
            strokeWidth: parseInt(document.getElementById('strokeWidth').value),
            isBold: document.getElementById('isBold').checked,
            isItalic: document.getElementById('isItalic').checked
        };

        poi.updateTextContentAndStyle(config);
        console.log(`应用文字样式到 ${currentSelectedPOI}:`, config);
    }

    /**
     * 接口2: 应用文字布局与位置
     */
    function applyLayoutAndPosition() {
        const poi = getCurrentPOI();
        if (!poi) return;

        // 应用布局
        const textPosition = document.getElementById('textPosition').value;
        poi.updateTextLayout(textPosition);

        // 应用位置偏移
        const offsetConfig = {
            textOffsetX: parseInt(document.getElementById('offsetX').value),
            textOffsetY: parseInt(document.getElementById('offsetY').value)
        };
        poi.updateTextOffset(offsetConfig);

        console.log(`🎯 应用布局与位置到 ${currentSelectedPOI}:`, {
            layout: textPosition,
            offset: offsetConfig
        });
    }

    /**
     * 接口4: 应用文字背景
     */
    function applyTextBackground() {
        const poi = getCurrentPOI();
        if (!poi) return;

        const enabled = document.getElementById('enableBackground').checked;
        const color = document.getElementById('backgroundColor').value;
        const opacity = parseFloat(document.getElementById('backgroundOpacity').value);
        const shape = document.getElementById('backgroundShape').value;
        const size = parseFloat(document.getElementById('backgroundSize').value);

        // 将颜色从hex转换为rgb
        const rgbColor = hexToRgb(color);

        const config = {
            enabled: enabled,
            color: `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`,
            opacity: opacity,
            shape: shape,
            size: size
        };

        poi.updateTextBackground(config);
        console.log(`应用文字背景到 ${currentSelectedPOI}:`, config);
    }

    /**
     * 接口4: 应用图形样式
     */
    function applyGraphicStyle() {
        const poi = getCurrentPOI();
        if (!poi) return;

        // 应用默认形状
        const shape = document.getElementById('defaultShape').value;
        poi.updateDefaultShape(shape);

        // 应用形状样式
        const shapeStyleConfig = {
            size: parseFloat(document.getElementById('shapeSize').value),
            color: document.getElementById('shapeColor').value,
            strokeColor: document.getElementById('shapeStrokeColor').value,
            strokeWidth: parseInt(document.getElementById('shapeStrokeWidth').value)
        };
        poi.updateShapeStyle(shapeStyleConfig);

        // 应用纹理图片（如果有的话）
        if (currentTextureImage) {
            poi.updateShapeTexture(currentTextureImage);
            console.log('应用纹理图片成功！');
        }

        console.log(`应用图形样式到 ${currentSelectedPOI}:`, {
            shape: shape,
            style: shapeStyleConfig,
            hasTexture: !!currentTextureImage
        });
    }

    /**
     * 重置当前POI
     */
    function resetPOI() {
        const poi = getCurrentPOI();
        if (!poi) return;

        // 重置为默认值
        poi.updateTextContentAndStyle({
            name: `接口控制-${currentSelectedPOI.slice(-1)}`,
            size: 1000,
            textStyle: '#DC143C',
            strokeStyle: '#000000',
            strokeWidth: 5,
            isBold: true,
            isItalic: false
        });

        poi.updateTextLayout('bottom');
        poi.updateTextOffset({ textOffsetX: 0, textOffsetY: 0 });
        poi.updateTextBackground({ enabled: false });

        // 重置形状样式
        poi.updateDefaultShape('circle');
        poi.updateShapeStyle({
            size: 1.0,
            color: '#DC143C',
            strokeColor: '#000000',
            strokeWidth: 2
        });

        // 清除纹理
        clearTexture();
        poi.updateShapeTexture(null);

        // 更新界面
        updateGUIFromCurrentPOI();
    }

    /**
     * 复制到其他POI
     */
    function copyToOtherPOIs() {
        const sourcePOI = getCurrentPOI();
        if (!sourcePOI) return;

        const otherPOIs = ['poi1', 'poi2', 'poi3'].filter(poi => poi !== currentSelectedPOI);

        // 获取当前配置
        const textConfig = {
            name: document.getElementById('textContent').value,
            size: parseInt(document.getElementById('fontSize').value),
            textStyle: document.getElementById('textColor').value,
            strokeStyle: document.getElementById('strokeColor').value,
            strokeWidth: parseInt(document.getElementById('strokeWidth').value),
            isBold: document.getElementById('isBold').checked,
            isItalic: document.getElementById('isItalic').checked
        };

        // 获取布局和位置配置
        const layoutConfig = document.getElementById('textPosition').value;
        const offsetConfig = {
            textOffsetX: parseInt(document.getElementById('offsetX').value),
            textOffsetY: parseInt(document.getElementById('offsetY').value)
        };

        // 获取背景配置
        const backgroundConfig = {
            enabled: document.getElementById('enableBackground').checked,
            color: hexToRgb(document.getElementById('backgroundColor').value),
            opacity: parseFloat(document.getElementById('backgroundOpacity').value),
            shape: document.getElementById('backgroundShape').value,
            size: parseFloat(document.getElementById('backgroundSize').value)
        };

        // 获取形状配置
        const shapeConfig = document.getElementById('defaultShape').value;
        const shapeStyleConfig = {
            size: parseFloat(document.getElementById('shapeSize').value),
            color: document.getElementById('shapeColor').value,
            strokeColor: document.getElementById('shapeStrokeColor').value,
            strokeWidth: parseInt(document.getElementById('shapeStrokeWidth').value)
        };

        // 应用到其他POI
        otherPOIs.forEach(poiName => {
            const poi = window[poiName];
            if (poi) {
                // 应用文字样式
                poi.updateTextContentAndStyle({
                    ...textConfig,
                    name: `${textConfig.name}-${poiName.slice(-1)}`  // 保持POI名称唯一
                });

                // 应用布局和位置
                poi.updateTextLayout(layoutConfig);
                poi.updateTextOffset(offsetConfig);

                // 应用背景
                poi.updateTextBackground({
                    ...backgroundConfig,
                    color: `${backgroundConfig.color.r}, ${backgroundConfig.color.g}, ${backgroundConfig.color.b}`
                });

                // 应用形状配置
                poi.updateDefaultShape(shapeConfig);
                poi.updateShapeStyle(shapeStyleConfig);

                // 应用纹理图片（如果有的话）
                if (currentTextureImage) {
                    poi.updateShapeTexture(currentTextureImage);
                }
            }
        });
    }

    // =========================
    // 辅助函数
    // =========================

    /**
     * 获取当前选中的POI对象
     */
    function getCurrentPOI() {
        return window[currentSelectedPOI];
    }

    /**
     * 根据当前POI更新界面参数 
     */
    function updateGUIFromCurrentPOI() {
        const poi = getCurrentPOI();
        if (!poi) return;

        // 获取POI的真实当前配置
        const config = poi.getCurrentConfig();

        // 更新文字内容和样式
        document.getElementById('textContent').value = config.name;

        // 更新字体大小滑块和显示值
        document.getElementById('fontSize').value = config.size.toString();
        document.getElementById('fontSizeValue').textContent = config.size + 'px';

        document.getElementById('textColor').value = config.textStyle;
        document.getElementById('strokeColor').value = config.strokeStyle;

        // 更新描边宽度滑块和显示值
        document.getElementById('strokeWidth').value = config.strokeWidth.toString();
        document.getElementById('strokeWidthValue').textContent = config.strokeWidth + 'px';

        document.getElementById('isBold').checked = config.isBold;
        document.getElementById('isItalic').checked = config.isItalic;

        // 更新布局配置
        document.getElementById('textPosition').value = config.textPosition;

        // 更新偏移滑块和显示值
        document.getElementById('offsetX').value = config.textOffsetX.toString();
        document.getElementById('offsetXValue').textContent = config.textOffsetX + 'px';

        document.getElementById('offsetY').value = config.textOffsetY.toString();
        document.getElementById('offsetYValue').textContent = config.textOffsetY + 'px';

        // 更新背景配置
        const hasBackground = config.backGroundStyle && config.backGroundStyle !== '';
        document.getElementById('enableBackground').checked = hasBackground;

        // 解析背景颜色和透明度（如果有背景的话）
        if (hasBackground) {
            const bgMatch = config.backGroundStyle.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
            if (bgMatch) {
                const r = parseInt(bgMatch[1]);
                const g = parseInt(bgMatch[2]);
                const b = parseInt(bgMatch[3]);
                const opacity = bgMatch[4] ? parseFloat(bgMatch[4]) : 1;

                // 将RGB转换为hex颜色
                const hexColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
                document.getElementById('backgroundColor').value = hexColor;

                // 更新背景透明度滑块和显示值
                document.getElementById('backgroundOpacity').value = opacity.toString();
                document.getElementById('backgroundOpacityValue').textContent = opacity;
            }
        } else {
            // 如果没有背景，设置默认值
            document.getElementById('backgroundColor').value = '#ffffff';
            document.getElementById('backgroundOpacity').value = '0.8';
            document.getElementById('backgroundOpacityValue').textContent = '0.8';
        }

        // 更新背景形状样式
        document.getElementById('backgroundShape').value = config.backgroundShape || 'rectangle';

        // 更新背景大小滑块和显示值
        const backgroundSize = config.backgroundSize || 1.0;
        document.getElementById('backgroundSize').value = backgroundSize.toString();
        document.getElementById('backgroundSizeValue').textContent = backgroundSize + 'x';

        // 更新形状配置 - 显示真实的形状设置！
        document.getElementById('defaultShape').value = config.defaultShape;

        // 更新形状大小滑块和显示值
        document.getElementById('shapeSize').value = config.shapeSize.toString();
        document.getElementById('shapeSizeValue').textContent = config.shapeSize + 'x';

        document.getElementById('shapeColor').value = config.shapeColor;
        document.getElementById('shapeStrokeColor').value = config.shapeStrokeColor;

        // 更新形状描边宽度滑块和显示值
        document.getElementById('shapeStrokeWidth').value = config.shapeStrokeWidth.toString();
        document.getElementById('shapeStrokeWidthValue').textContent = config.shapeStrokeWidth + 'px';

        // 更新纹理预览状态
        if (config.textureImage) {
            // 如果有纹理图片，显示预览
            currentTextureImage = config.textureImage;
            updateTexturePreview(config.textureImage.src);
        } else {
            // 如果没有纹理图片，清除预览
            currentTextureImage = null;
            const texturePreview = document.getElementById('texturePreview');
            texturePreview.innerHTML = '<span class="texture-placeholder">📷 点击上传纹理图片</span>';
            texturePreview.classList.remove('has-image');
        }
    }

    /**
     * 颜色转换函数 - hex转rgb
     */
    function hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : { r: 255, g: 255, b: 255 };
    }
</script>

</html>